<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
    <!-- 引入样式 组件库-->
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../element-ui/lib/index.js"></script>
</head>
<body>
<div id="app1">
    <p>"3.2+2.4": {{3.2+2.4}}</p>
    <p>"3.3+2.4": {{3.3+2.4}}</p>
    <p>"3.4+2.4": {{3.4+2.4}}</p>
    <br>
    {{name}}
    <span v-bind:title="name">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
   </span>
    <ul v-for="item in dict.userArr">
        <li v-if="item!='b'">{{item}}</li>
    </ul>
    <ul v-for="(item,index) in dict.userArr">
        <li>{{index}}-{{item}}</li>
    </ul>
    <span v-text="name"></span>
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog>
</div>
<div id="app2">
    {{name}}
</div>
<div id="app3">
    {{name}}
</div>
</body>
<script type="text/javascript">
    let vueObj1 = new Vue({
        el: "#app1",
        data: {
            name: "基础语法1",
            visible: false,
            dict: {
                userArr: ["a", "b", "c"]
            }
        }
    });
    let vueObj2 = new Vue({
        el: "#app2",
        data: function () {
            return {
                name: "基础语法2"
            }
        }
    });
    let vueObj3 = new Vue({
            el: "#app3",
            data() {
                return {
                    name: "基础语法3"
                }
            }
        })
    ;
</script>
</html>
